<template>
	<view class="order-details" v-if="show">
		<view class="order-details-content">
			<view class="logistics-address-card">
				<view class="order-state">
					<view class="order-state-left">
						<image 
							src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/order-status-1.jpg" 
							v-if="orderInfo.status_name==='待付款'">
						</image>
						<image
							src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/order-status-2.jpg" 
							v-if="orderInfo.status_name==='待发货'">
						</image>
						<image
							src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/order-status-3.jpg" 
							v-if="orderInfo.status_name==='待收货'">
						</image>
						<image
							src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/order-status-4.jpg" 
							v-if="orderInfo.status_name==='已完成'">
						</image>
						<image
							src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/order-status-5.png" 
							v-if="orderInfo.status_name==='已取消'">
						</image>
						<text>{{orderInfo.status_name}}</text>
					</view>
					<view class="order-state-right">订单进度：<text>{{currentIndex}}</text>/{{orderInfo.order_info_express.length}}</view>
				</view>
				<view class="time-line" v-if="order_info_express.length">
					<u-time-line>
						<!-- <u-time-line-item v-for="(data,index) in orderInfo.order_info_express.slice(0,1)" :key="data.express_id">
							<template v-slot:node>
								<view class="u-node" :class="{active: data.status==1,address: index==0}">
									<text>收</text>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="u-order-title">{{data.desc}}<text>{{data.phone}}</text></view>
									<view class="u-order-desc">{{data.order_goods_express[0].desc}}</view>
								</view>
							</template>
						</u-time-line-item> -->
						<u-time-line-item v-for="(data,index) in order_info_express" :key="data.express_id" class="active">
							<!-- 此处自定义了左边内容，用一个图标替代 -->
							<template v-slot:node>
								<view class="u-node" :class="{active: data.status==1}">{{data.step}}</view>
							</template>
							<template v-slot:content>
								<view class="line" v-if="data.status==1 && index!=order_info_express.length-1"></view>
								<view :class="{active: data.status==1}">
									<view class="u-order-title">{{data.desc}}</view>
									<view class="u-order-info" v-for="(item,i) in data.order_goods_express" :key="item.express_goods_id" :class="{active: data.status==1}">
										<view class="u-order-subtitle">{{item.desc}}</view>
										<view class="u-order-time">{{item.add_time}}</view>
									</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>
				<view class="time-line-more" v-if="order_info_express.length"><pt-jump-more text="查看全部状态" @more="goOrderTrack"></pt-jump-more></view>
			</view>

			<view class="goods-info-card">
				<view class="store-name">{{orderInfo.store_name}}</view>
				<view class="order-content">
					<view class="goods-info" v-for="(data,index) in orderInfo.goods_list" :key="index" @click="goAfterSale(data.goods_id,data.rec_id)">
						<image :src="data.image_thumb || data.sku_info.img" mode=""></image>
						<view class="goods-text">
							<view class="goods-name">{{data.goods_name}}</view>
							<view class="goods-price"><text>¥</text>{{data.goods_price}}</view>
							<view class="goods-sku" v-if="data.sku_info">
								{{data.sku_info.color != null ? data.sku_info.color:''}}
								{{data.sku_info.lining != null ? data.sku_info.lining:''}}
								{{data.sku_info.size != null ? data.sku_info.size:''}}
								数量{{data.goods_number}}
							</view>
							<view class="goods-remark" v-if="data.brief">
								商品备注：
								<text>{{data.brief}}</text>
							</view>
						</view>
						<view v-if="parent_id == 0">
							<view class="after-sale" v-if="orderInfo.shipping_status == 2 && data.is_after==3 && !data.have_group  || activity">
								<button class='btn' @click.stop="goAfterSale(data.goods_id,data.rec_id)">申请售后</button>
							</view>
							<view class="after-sale" v-if="orderInfo.shipping_status == 2 && data.is_after==0 && !data.have_group">
								<button class='btn' @click.stop="goSaleAfter(data.order_after_id)">待处理</button>
							</view>
							<view class="after-sale" v-if="orderInfo.shipping_status == 2 && data.is_after==1 && !data.have_group">
								<button class='btn' @click.stop="goSaleAfter(data.order_after_id)">处理中</button>
							</view>
							<view class="after-sale" v-if="orderInfo.shipping_status == 2 && data.is_after==2 && !data.have_group">
								<button class='btn' @click.stop="goSaleAfter(data.order_after_id)">已处理</button>
							</view>
						</view>
					</view>
				</view>
				<view class="goods-price-list" style="margin-top: 30rpx;">
					<view class="total-name" style="flex: none;">订单备注：{{orderInfo.brief?orderInfo.brief:'无'}}</view>
				</view>
				<view class="goods-price-list">
					<view class="total-name">商品总额</view>
					<view class="total-price"><text>¥</text>{{order_amount}}</view>
				</view>
				<view class="goods-price-list" @click="choseCoupon()">
					<view class="total-name">优惠券</view>
					<view v-if="couponList.length == 0 && !orderInfo.coupon_id" class="total-price">无可用</view>
					<view v-if="couponList.length == 0 && orderInfo.coupon_id" class="total-price"><text>优惠金额：¥</text>{{orderInfo.coupon_price}}</view>
					<view v-if="coupon_name != ''" class="total-price">已选择：{{coupon_name}}</view>
					<view v-if="couponList.length != 0 && coupon_name == ''" class="total-price" style="color: red;">{{couponList.length}}张优惠券
						(未选择)</view>
				</view>
				<view class="goods-price-list">
					<view class="total-name">运费</view>
					<view class="total-price"><text>¥</text>0</view>
				</view>
				<view class="goods-price-list" style="border-top: 2rpx solid #F4F4F4;">
					<view class="total-name">实际付款</view>
					<view class="total-price" style="color: #F49359;"><text>¥</text>{{order_amount}}</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="order-info-title">
					订单信息
					<view class="notice" @click="lookReceipt">收货注意事项 <u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="order-sn-view">
					<text class="order-sn-title">订单编号</text>
					<text class="order-num">{{orderInfo.order_sn}}</text>
					<text class="copy-btn" @click="copy(orderInfo.order_sn)">复制</text>
				</view>
				<view class="order-time-view">
					<text class="order-time-title">下单时间</text>
					<text class="order-time">{{orderInfo.add_time}}</text>
				</view>
				<view class="order-time-view" v-if="orderInfo.expressCompany">
					<text class="order-time-title">物流公司</text>
					<text class="order-time">{{orderInfo.expressCompany}}</text>
				</view>
				<view class="order-time-view" v-if="orderInfo.express_sn && orderInfo.express_sn!=='0'">
					<text class="order-time-title">物流单号</text>
					<text class="order-time">{{orderInfo.express_sn}}</text>
				</view>
				<view class="order-time-view" v-if="orderInfo.express_img.length">
					<text class="order-time-title">物流图片</text>
					<text class="order-time" style="color: #F59359;" @click="lookExpress(orderInfo.express_img)"><text>点击查看物流单图片</text></text>
				</view>
			</view>
			<!-- 订单用户信息 -->
			<view class="order-userinfo" v-if="role_type==6 || role_type==7">
				<view class="order-info-title">
					下单用户
				</view>
				<view class="order-userinfo-box">
					<view class="order-userinfo-avatar">
						<image :src="orderInfo.user_info.heard_img"></image>
					</view>
					<view class="order-userinfo-info" v-if="orderInfo.user_info">
						<view class="order-userinfo-nickname">{{orderInfo.user_info.nickname}}<text>ID:{{orderInfo.user_id}}</text></view>
						<view class="order-userinfo-phone">{{orderInfo.user_info.phone}}</view>
					</view>
					<view class="order-userinfo-btn" @click="tapPhone(orderInfo.user_info.phone)">联系TA</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮菜单 -->
		<view class="menu-bottom" v-if="parent_id == 0 && !activity">
			<view class="btn-view" v-if="orderInfo.order_status == 0 && orderInfo.shipping_status == 0 && orderInfo.pay_status == 0 ">
				<u-button :ripple="true" @click="againPay(orderInfo.order_id)" size="medium" :custom-style="customStyle2"
				 throttle-time="1000">立即支付</u-button>
			</view>
			<view class="btn-view" v-if="orderInfo.order_status == 0 && orderInfo.shipping_status == 1 && orderInfo.pay_status == 2 ">
				<u-button :ripple="true" @click="affirmOrder(orderInfo.order_id)" size="medium" :custom-style="customStyle2"
				 throttle-time="1000">确认收货</u-button>
			</view>
			<!-- <view class="btn-view">
				<u-button :ripple="true" size="medium" :custom-style="customStyle" throttle-time="1000">查看物流</u-button>
			</view> -->
		</view>
		<!-- 注意事项弹窗 -->
		<uni-popup type="center" ref="receipt">
			<pt-notice title="收货注意事项" :html="ReceiptHtml" @closeNotice="closeReceipt" @confirmNotice="confirmReceipt"></pt-notice>
		</uni-popup>
		<!-- 注意事项弹窗 -->
		<pt-loading></pt-loading>

		<!-- APP选择支付方式 -->
		<u-action-sheet :list="payWayList" v-model="showPayWay" :tips="{text: '请选择支付方式'}" :cancel-btn="true" border-radius="10"
		 @click="appPay">
		</u-action-sheet>
		<!-- APP选择支付方式 -->

		<!-- 优惠券弹窗选择-->
		<uni-popup ref="coupon" type="bottom" class="coupon-pop">
			<view class="coupon-list">
				<view class="coupon-list-tit">选择优惠券 <u-icon name="close" color="#999" @click="closeCoupon"></u-icon>
				</view>
				<scroll-view scroll-y class="coupon-list-box">
					<view class="coupon-item-list">
						<view class="coupon-item" v-for="(data,index) in couponList" :key="index" @click="choseCouponEvent(data.coupon_list_id,data.amount,data.card_name)">
							<view class="coupon-item-left">
								<view class="coupon-item-left-text">
									<view class="coupon-item-left-money" v-if="data.card_type==1">￥<text>{{data.amount}}</text></view>
									<view class="coupon-item-left-money" v-if="data.card_type==2"><text>9</text>折</view>
									<view class="coupon-item-left-des">满{{data.use_price}}可用</view>
								</view>
								<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/confirmOrder/icon5.png"></image>
							</view>
							<view class="coupon-item-right">
								<view class="coupon-name">{{data.card_name}}</view>
								<view class="coupon-time">有效期截至：{{data.end_time}}</view>
							</view>
							<view :class="['cpupon-checked',{active: coupon_list_id==data.coupon_list_id}]">
								<u-icon name="checkbox-mark" color="#FFF" v-if="coupon_list_id==data.coupon_list_id" size="20"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 优惠券弹窗选择-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payWayList: [{
					text: '微信支付',
					color: ''
				}, {
					text: '支付宝支付',
					color: ''
				}],
				showPayWay: false,
				show: false,
				order_id: '',
				parent_id: '',
				customStyle: {
					borderColor: '#000000', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#000000'
				},
				customStyle2: {
					borderColor: '#F59359', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background: '#F59359'
				},
				orderInfo: '',
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				ReceiptHtml: '<b>1、</b>外包装破损严重的，直接拒收；<br /><b>2、</b>外包装破损不严重当场拆装检查，小问题能处理的异常签收，把异常签收单拍照留作凭证，然后把异常签收单让师傅带走并第一时间跟我们反馈问题 ；<br /><b>3、</b>产品有售后问题，外包装不要扔，另要拍照片作凭证，待协商好再处理外包装。<br /><b>4、</b>产品有破损等售后问题，要异常签收，对于一些大理石、玻璃易损品物流保丢不保损。',
				order_amount: '',
				couponList: [],
				coupon_list_id: '',
				coupon_name: '',
				role_type: '',
				currentIndex: 0,
				order_info_express: [],
				activity: ''
			};
		},
		onLoad(options) {
			uni.removeStorageSync('userInfo')
			this.order_id = options.id
			this.activity = options.activity
			this.getOrderInfo()
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl',curPage.$page.fullPath)
			if(uni.getStorageSync('userInfo')){
				this.role_type = JSON.parse(uni.getStorageSync('userInfo')).role_type
				// if(typeof uni.getStorageSync('userInfo')==='string'){
				// 	console.log(uni.getStorageSync('userInfo'),'string')
				// 	// alert('string')
				// 	this.role_type = JSON.parse(uni.getStorageSync('userInfo')).role_type
				// }else{
				// 	console.log(uni.getStorageSync('userInfo'),'object')
				// 	// alert('object')
				// 	uni.clearStorageSync('userInfo')
				// }
			}else{
				console.log(uni.getStorageSync('userInfo'),'nouserInfo')
				// alert('nouserInfo')
			}
		},
		methods: {
			getOrderInfo() {
				let data = {
					order_id: this.order_id,
					activity: this.activity
				}
				this.$u.api.WebOrderInfo(data).then(res => {
					this.orderInfo = res.datas
					this.order_amount = this.orderInfo.order_amount
					this.show = true
					this.orderInfo.order_info_express.forEach(item => {
						if(item.status==1){
							this.currentIndex++
							this.order_info_express.push(item)
						}
					})
					// this.getCoupon()
					if (this.orderInfo.coupon_id) this.coupon_list_id = this.orderInfo.coupon_id
				})
			},
			getCoupon() {
				let data = {
					order_id: this.order_id,
				}
				if (!this.orderInfo.coupon_id) {
					this.$u.apiWei.SelectCoupon(data).then(res => {
						this.couponList = res.datas
					})
				}
			},
			copy(content) {
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						});
					}
				});
			},
			goSaleAfter(order_after_id) {
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/my-order/after_sale_detail/after_sale_detail?order_after_id=' + order_after_id
				})
			},
			// 确认收货
			affirmOrder(order_id) {
				let data = {
					order_id: order_id
				}
				uni.showModal({
					title: '提示',
					content: '是否确认收货？',
					success: (res) => {
						if (res.confirm) {
							this.$u.apiWei.OrderAffirm(data).then(res => {
								this.getOrderInfo()
								uni.showToast({
									title: res.datas,
									duration: 1000
								});
							})
						}
					}
				});
			},
			// 立即支付
			againPay(order_id) {
				// #ifdef H5
				uni.showModal({
					showCancel: false,
					title: '温馨提示',
					content: '暂不支持网页支付，请移步小程序或APP支付'
				})
				return
				// #endif

				// #ifdef APP-PLUS
				this.showPayWay = true
				// #endif

				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						let data = {
							order_id: order_id,
							pay_id: 1,
							pay_client: 1,
							coupon_list_id: this.coupon_list_id,
							code: loginRes.code
						}

						this.$u.apiWei.againPay(data).then(res => {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.datas.timeStamp,
								nonceStr: res.datas.nonceStr,
								package: res.datas.package,
								signType: 'MD5',
								paySign: res.datas.paySign,
								success: (successRes) => {
									uni.showToast({
										icon: 'none',
										title: '支付成功',
										duration: 1500
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								},
								fail: (err) => {
									let msg = err.errMsg
									if (msg.indexOf('cancel') != -1) {
										uni.showToast({
											icon: 'none',
											title: '取消支付',
											duration: 1500
										})
									} else {
										uni.showToast({
											icon: 'none',
											title: '支付失败',
											duration: 1500
										})
									}
								}
							});
						})
					}
				})
				// #endif
			},
			// APP选择支付方式
			appPay(type) {
				this.isPay = true
				let data = {}
				switch (Number(type)) {
					case 0:
						data = {
							order_id: this.orderInfo.order_id,
							pay_id: 1,
							pay_client: 2,
							coupon_list_id: this.coupon_list_id,
						}

						this.$u.apiWei.againPay(data).then(res => {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: {
									appid: res.datas.appid,
									noncestr: res.datas.noncestr,
									package: res.datas.packages,
									partnerid: res.datas.partnerid,
									prepayid: res.datas.prepayid,
									timestamp: res.datas.timestamp,
									sign: res.datas.sign
								},
								success: (success) => {
									this.isPay = false
									uni.showToast({
										icon: 'none',
										title: '支付成功',
										duration: 1500
									})

									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								},
								fail: (fail) => {
									this.isPay = false
									uni.showToast({
										icon: 'none',
										title: '支付未完成',
										duration: 1500
									})
								},
								complete: (complate) => {
									console.log(complate)
								}
							})
						}).catch(() => {
							this.isPay = false
							uni.showToast({
								icon: 'none',
								title: '网络打盹啦，请稍后再试'
							})
						})
						break
					case 1:
						data = {
							order_id: this.orderInfo.order_id,
							pay_id: 2,
							pay_client: 2,
							coupon_list_id: this.coupon_list_id,
						}
						this.$u.apiWei.againPay(data).then(res => {
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: res.datas,
								success: (success) => {
									this.isPay = false
									uni.showToast({
										icon: 'none',
										title: '支付成功',
										duration: 1500
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								},
								fail: (fail) => {
									this.isPay = false
									uni.showToast({
										icon: 'none',
										title: '支付未完成',
										duration: 1500
									})
								},
								complete: (complate) => {
									console.log(complate)
								}
							})
						}).catch(() => {
							this.isPay = false
							uni.showToast({
								icon: 'none',
								title: '网络打盹啦，请稍后再试'
							})
						})
						break;
				}
			},
			goAfterSale(goods_id, rec_id) {
				let order_id = this.orderInfo.order_id,
					recid = rec_id,
					ordersn = this.orderInfo.order_sn,
					goodsid = goods_id,
					storeid = this.orderInfo.store_id

				uni.navigateTo({
					animationDuration: 500,
					url: '/my/my-order/after_sale_form/after_sale_form?order_id=' + order_id + '&recid=' + recid + '&ordersn=' +
						ordersn + '&goodsid=' + goodsid + '&storeid=' + storeid + '&activity=74785',
				})

			},
			addFoot(where) {
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			lookReceipt() {
				this.$refs.receipt.open()
			},
			closeReceipt() {
				this.$refs.receipt.close()
			},
			confirmReceipt() {
				this.$refs.receipt.close()
			},
			goOrderTrack() {
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/my-order/order-express/order-express?order_express_list=' + JSON.stringify(this.orderInfo.order_info_express)
				})
			},
			// 去商品详情或者套餐详情
			goGoodsDetails(id, goods_type) {
				if (goods_type == 2) {
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/package/n98-info?group_id=' + id
					})
				} else if (goods_type == 3) {
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/package/house-info?group_id=' + id
					})
				} else if (goods_type == 4) {
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/product-info/product-info?goods_id=' + id + '&isMerchant=true'
					})
				} else if (goods_type == 6) {
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/light/light-product-info?goods_id=' + id + '&isMerchant=true'
					})
				} else {
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/product-info/product-info?goods_id=' + id
					})
				}
			},
			// 选择优惠券
			choseCoupon() {
				if (!this.couponList.length) {
					uni.showToast({
						icon: 'none',
						title: '此订单暂无可用优惠券'
					})
					return false
				}
				// couponList.forEach(item => {
				// 	this.$set(item,'checked',false)
				// })

				//this.choseCouponIndex = index
				this.$refs.coupon.open()
			},
			choseCouponEvent(coupon_id, amount, coupon_name) {
				this.$refs.coupon.close()
				if (amount > this.orderInfo.order_amount) {
					uni.showToast({
						icon: 'none',
						title: '优惠券金额不能大于订单金额'
					})
					return false
				}
				if (this.coupon_list_id == coupon_id) {
					this.coupon_list_id = ''
					this.coupon_name = ''
					this.order_amount = this.orderInfo.order_amount
				} else {
					this.coupon_list_id = coupon_id
					this.coupon_name = coupon_name
					this.order_amount = this.orderInfo.order_amount - amount
				}
			},
			closeCoupon() {
				this.$refs.coupon.close()
			},
			tapPhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			lookExpress(images){
				uni.previewImage({
					urls: images
				})
			}
		},
		mounted() {
			this.addFootParam.start_time = parseInt(new Date().getTime() / 1000)
		},
		// onUnload() {
		// 	this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
		// 	this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
		// 	if (uni.getStorageSync('userInfo')) {
		// 		this.addFoot('查看订单')
		// 	}
		// }
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
	}

	.order-details {
		.u-node {
			width: 47rpx;
			height: 41rpx;
			line-height: 41rpx;
			border-radius: 100rpx;
			background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/order-step.png);
			background-size: cover;
			color: #FFF;
			padding-left: 14rpx;
			background-repeat: no-repeat;
			&.active{
				color: #FFF;
				background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/order-step-hover.png);
				background-size: cover;
			}
			&.address{
				width: 47rpx;
				height: 47rpx;
				padding: 0;
				text-align: center;
				line-height: 47rpx;
			}
		}
		
		.u-order-title {
			color: #999;
			font-weight: bold;
			font-size: 28rpx;
			text{
				margin-left: 20rpx;
			}
		}
		
		.u-order-subtitle{
			color: #666;
			// padding-right: 100rpx;
			flex: 1;
			margin-right: 20rpx;
		}
		
		.u-order-desc {
			color: rgb(150, 150, 150);
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}
		
		.u-order-time {
			color: rgb(200, 200, 200);
			font-size: 26rpx;
		}
		
		.time-line{
			margin-top: 30rpx;
			border-top: solid 2rpx #F2F2F2;
			padding: 40rpx 20rpx 0;
			/deep/ .u-time-axis{
				&::before{
					border-left-width: 8rpx;
					bottom: 20%;
					/* #ifdef MP-WEIXIN */
					bottom: 21%;
					/* #endif */
				}
			}
			/deep/ .u-time-axis-node{
				left: -38rpx;
			}
			/deep/ .u-time-axis-item{
				padding-bottom: 50rpx;
				margin-bottom: 0;
				.line{
					position: absolute;
					content: '';
					width: 4rpx;
					height: 100%;
					left: -20px;
					top: 15rpx;
					background-color: #F59359;
				}
			}
			/deep/ .u-time-axis-item.active{
				margin-bottom: 0;
				padding-bottom: 30rpx;
			}
		}
		.active{
			.u-order-title{
				color: #141414;
			}
		}
		.u-order-info{
			position: relative;
			padding-top: 10rpx;
			display: flex;
			// .u-order-time{
			// 	position: absolute;
			// 	right: 0;
			// 	top: 0;
			// 	transform: translateY(-100%);
			// }
		}
		
		.order-details-content {
			padding-bottom: 104rpx;

			.logistics-address-card {
				background-color: #fff;
				margin: 20rpx 30rpx;
				border-radius: 8rpx;
				padding: 30rpx 20rpx;
				.order-state {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #757575;
					.order-state-left{
						image {
							width: 44rpx;
							height: 44rpx;
						}
						text {
							margin-left: 22rpx;
							line-height: 44rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #000000;
						}
					}
					.order-state-right{
						text{
							color: #141414;
							font-weight: bold;
						}
					}
				}

				.order-logistics {
					border-bottom: 2rpx solid #F4F4F4;
				}

				.order-logistics-address {
					padding: 48rpx 0;
					display: flex;
					width: 100%;
					height: 186rpx;
					box-sizing: border-box;


					.img-icon {
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							margin-right: 34rpx;
							width: 36rpx;
							height: 36rpx;
						}
					}
				}

				.text-info {
					flex: 1;

					text {
						display: block;
					}

					text:first-child {
						line-height: 32rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #141414;
					}

					text:last-child {
						margin-top: 28rpx;
						line-height: 28rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #4C4C4C;
					}
				}

				.arrow-icon {
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 12rpx;
						height: 22rpx;
					}
				}
			}

			.goods-info-card {
				// margin-top: 30rpx;
				padding: 30rpx 30rpx 0 30rpx;
				background-color: #fff;
				.store-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #131313;
				}

				.order-content {
					margin-top: 76rpx;

					.goods-info {
						position: relative;
						margin-top: 90rpx;
						display: flex;

						&:first-child {
							margin-top: 0;
						}

						.after-sale {
							position: absolute;
							right: 0;
							bottom: 92rpx;

							button {
								display: inline-block;
								width: 124rpx;
								height: 42rpx;
								line-height: 38rpx;
								border-radius: 30rpx;
								font-size: 20rpx;
								color: #5E5E5E;
								background-color: #fff;
								border: 2rpx solid #5E5E5E;
								padding: 0;
								margin: 0;
								margin-left: 24rpx;
							}
						}
					}

					.goods-info image {
						display: block;
						width: 176rpx;
						height: 176rpx;
						border-radius: 4rpx;
					}

					.goods-text {
						padding-left: 30rpx;
						flex: 1;
					}

					.goods-name {
						width: 460rpx;
						line-height: 26rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #141414;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.goods-price {
						margin-top: 36rpx;
						line-height: 28rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #141414;
					}

					.goods-price text {
						font-size: 20rpx;
					}

					.goods-sku {
						margin-top: 20rpx;
						line-height: 30rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #757575;
					}

					.goods-remark {
						margin-top: 20rpx;
						font-size: 24rpx;

						text {
							color: #666;
						}
					}

				}

				.goods-price-list {
					display: flex;
					line-height: 126rpx;

					view {
						flex: 1;
					}

					.total-name {
						font-size: 28rpx;
						color: #434343;
						text-align: left;
					}

					.total-price {
						font-size: 28rpx;
						font-weight: bold;
						color: #131313;
						text-align: right;

						text {
							font-size: 20rpx;
						}
					}

				}
			}

			.order-info {
				margin-top: 30rpx;
				padding: 40rpx 30rpx;
				background-color: #fff;

				.order-info-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #0A0A0A;
					display: flex;
					justify-content: space-between;

					.notice {
						color: #999;
						font-weight: normal;
						font-size: 24rpx;

						/deep/ .u-icon {
							margin-left: 10rpx;
						}
					}
				}

				.order-sn-view {
					margin-top: 30rpx;
					display: flex;
					padding: 15rpx 0;
					line-height: 44rpx;

					text {
						display: block;
					}

					.order-sn-title {
						width: 200rpx;
						font-size: 28rpx;
						color: #434343;
					}

					.order-num {
						flex: 1;
						font-size: 28rpx;
						font-weight: bold;
						color: #131313;
					}

					.copy-btn {
						width: 88rpx;
						line-height: 44rpx;
						text-align: center;
						border: 1px solid rgba(20, 20, 20, 1);
						border-radius: 4rpx;
						font-size: 24rpx;
						color: #131313;
					}
				}

				.order-time-view {
					display: flex;
					padding: 15rpx 0;
					line-height: 44rpx;

					text {
						display: block;
					}

					.order-time-title {
						width: 200rpx;
						font-size: 28rpx;
						color: #434343;
					}

					.order-time {
						flex: 1;
						font-size: 28rpx;
						font-weight: bold;
						color: #131313;
					}
				}


			}
			
			.order-userinfo{
				padding: 30rpx;
				background-color: #FFF;
				margin-top: 30rpx;
				.order-userinfo-box{
					display: flex;
					align-items: center;
					margin-top: 30rpx;
				}
				.order-info-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #0A0A0A;
					display: flex;
					justify-content: space-between;
				}
				.order-userinfo-avatar{
					image{
						border-radius: 50%;
						width: 100rpx;
						height: 100rpx;
					}
				}
				.order-userinfo-info{
					flex: 1;
					min-width: 0;
					margin: 0 30rpx;
					.order-userinfo-nickname{
						color: #141414;
						font-size: 26rpx;
						text{
							margin-left: 20rpx;
							color: #999;
							font-size: 24rpx;
						}
					}
					.order-userinfo-phone{
						margin-top: 20rpx;
					}
				}
				.order-userinfo-btn{
					height: 60rpx;
					line-height: 60rpx;
					background-color: #141414;
					border-radius: 8rpx;
					color: #FFF;
					padding: 0 20rpx;
				}
			}


		}

		.menu-bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 20rpx 30rpx;
			display: flex;
			width: 100%;
			flex-direction: row-reverse;
			border-top: 2rpx solid #F4F4F4;
			background-color: #fff;

			.btn-view {
				margin-right: 40rpx;
			}

			.u-size-medium {
				padding: 0 22rpx;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 24rpx;
			}

			.btn-view:first-child {
				margin-right: 0;
			}
		}

		.coupon-list {
			background-color: #FFF;
			min-height: 20%;
			border-radius: 20rpx 20rpx 0 0;
			padding: 30rpx 30rpx 0;

			.coupon-list-tit {
				position: relative;
				text-align: center;
				font-size: 36rpx;
				color: #141414;

				/deep/ .u-icon {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.coupon-list-box {
				max-height: 800rpx;
				margin-top: 70rpx;

				.coupon-item-list {
					.coupon-item {
						display: flex;
						align-items: center;
						margin-bottom: 70rpx;
						background-color: #FAFAFC;
						border-radius: 6rpx;
					}

					.coupon-item-left {
						position: relative;
						width: 200rpx;

						image {
							width: 200rpx;
							height: 150rpx;
						}

						.coupon-item-left-text {
							position: absolute;
							text-align: center;
							width: 100%;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							z-index: 1;
							color: #FFF;

							.coupon-item-left-money {
								font-size: 24rpx;

								text {
									font-size: 42rpx;
									margin: 0 10rpx;
								}
							}

							.coupon-item-left-des {
								font-size: 20rpx;
								margin-top: 10rpx;
							}
						}
					}

					.coupon-item-right {
						flex: 1;
						min-width: 0;
						margin-left: 30rpx;

						.coupon-name {
							font-weight: bold;
						}

						.coupon-time {
							margin-top: 10rpx;
							color: #999;
							font-size: 24rpx;
						}
					}

					.cpupon-checked {
						width: 36rpx;
						height: 36rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 4rpx;
						border: solid 4rpx #CCC;
						margin-right: 30rpx;
						transition: all .5s;

						&.active {
							border-color: #141414;
							background-color: #141414;
						}
					}
				}
			}
		}


	}
</style>
